<template>
  <!-- 弹出层 -->
  <el-dialog :visible="showDialog" title="离职申请" @close="btnCancel">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      status-icon
      label-width="110px"
      :rules="rules"
    >
      <!--离职表单-->
      <el-form-item label="离职时间" prop="end_time">
        <el-date-picker
          v-model="ruleForm.exceptTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
        />
      </el-form-item>
      <el-form-item label="离职原因" prop="reason">
        <el-input
          v-model="ruleForm.reason"
          type="textarea"
          :autosize="{minRows: 3, maxRows: 8}"
          style="width: 70%;"
          placeholder="请输入内容"
        />
      </el-form-item>
    </el-form>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
import { startProcess } from '@/api/approvals'
import { Form as ElForm } from 'element-ui'

@Component({ name: 'Appr' })
export default class extends Vue {
  @Prop({ default: false }) showDialog!: boolean
  get userId() {
    return this.$store.getters.userId
  }

  ruleForm = {
    exceptTime: '',
    reason: '',
    processKey: 'process_dimission', // 特定的审批
    processName: '离职'
  }

  rules = {
    exceptTime: [{ required: true, message: '离职时间不能为空' }],
    reason: [{ required: true, message: '离职原因不能为空' }]
  }

  btnOK() {
    (this.$refs.ruleForm as ElForm).validate(async validate => {
      if (validate) {
        const data = { ...this.ruleForm, userId: this.userId }
        await startProcess(data)
        this.$message.success('提交流程成功')
        this.btnCancel()
      }
    })
  }

  @Emit('update:show-dialog')
  btnCancel() {
    (this.$refs.ruleForm as ElForm).resetFields()
    this.ruleForm = {
      exceptTime: '',
      reason: '',
      processKey: 'process_dimission', // 特定的审批
      processName: '离职'
    }
    return false
  }
}
</script>
